

// 加载更多

document.getElementById('comm_1').innerHTML = document.getElementById('list_select').innerHTML;
document.getElementById('comm_2').innerHTML = document.getElementById('list_select').innerHTML;

function show_brief() {
    var obj1 = document.getElementById('comm_1');
    var obj2 = document.getElementById('comm_2');
    if (obj1.style.display == "") {
        obj1.style.display = "none";
        obj2.style.display = "";
        obj2.innerHTML = document.getElementById('list_select').innerHTML;
    } else {
        obj2.style.display = "none";
        obj1.style.display = "";
        obj1.innerHTML = document.getElementById('list_select').innerHTML;
    }

}

var _h = document.getElementById('comm_1').offsetHeight;
document.getElementById('list_select').style.display = "none";

if (_h > 200) {
    document.getElementById('comm_1').style.height = "209px";
    document.getElementById('comm_1').style.overflow = "hidden";
    document.getElementById('comm_3').style.display = "block";
}


// 列表选项卡1
window.onload = function () {

    //获取 li 也就是选项卡选项tab
    var filter = document.getElementById('filter');
    var oFilter = filter.getElementsByTagName('li');

    //获取 包裹在container里面的section（内容）
    var container = document.getElementById('container');
    var oDiv = container.getElementsByClassName('tab');

    for (var i = 0; i < oFilter.length; i++) {
        oFilter[i].index = i;

        //每一次得到li后执行鼠标点击操作则触发函数function 
        oFilter[i].onclick = function () {

            //此处除了可以使用onclick，还可以使用onmouseover
            //在li的个数内依次展示内容 
            for (var i = 0; i < oFilter.length; i++) {
                oFilter[i].className = '';
                oDiv[i].style.display = "none";
            }
            this.className = 'act';
            oDiv[this.index].style.display = "block"
        }
        for (var m = 1; m < oFilter.length; m++) {
            oFilter[m].className = '';
            oDiv[m].style.display = "none";
        }
    }


    var goods_item = document.querySelectorAll('.goods_item');
    // console.log(goods_item)
    for (var u = 0; u < goods_item.length; u++) {
        darg(goods_item[u])
    }
    function darg(abox) {
        //获取 li 也就是选项卡选项tab
        let oSmallImg = abox.querySelectorAll('#small_img li');
        // var  = small_img.querySelectorAll('li');

        // 获取 包裹在container里面的section（内容）
        var oGlasses = abox.querySelectorAll('#images .glasses');
        // var oGlasses=images.getElementsByClassName('glasses');

        // 使用 循环依次得到li 
        for (var i = 0; i < oSmallImg.length; i++) {
            oSmallImg[i].index = i;

            //每一次得到li后执行鼠标点击操作则触发函数function 
            oSmallImg[i].onclick = function () {

                //此处除了可以使用onclick，还可以使用onmouseover
                //在li的个数内依次展示内容 
                for (var i = 0; i < oSmallImg.length; i++) {
                    oSmallImg[i].className = '';
                    oGlasses[i].style.display = "none";
                }
                this.className = 'active';
                oGlasses[this.index].style.display = "block"
            }
            for (var m = 1; m < oSmallImg.length; m++) {
                oSmallImg[m].className = '';
                oGlasses[m].style.display = "none";
            }
        }
    };

}

;(function(){
    let ocont = document.querySelector('.tab');
    let xuan = document.querySelector('.xuan')
console.log(ocont)

let arr = []
// page(localStorage.getItem('pagenum') || 1)
function page(n) {
 
    xuan.innerHTML = ''
    pAjax({
        url: '../server/gList.php',
        type: 'get',
        data: {
            pagenum: n,
            pagesize: 12
        }
    }).then(function (res) {
        arr = JSON.parse(res)

        console.log(arr)

        arr.forEach(ele => {
            let str = `
                <div class="goods_item" style="width:285px; background: #fff; padding-right: 10px; margin-bottom: 15px;">
                    <div class="img_box">
                        <div id="images">
                            <section class="glasses">
                                <img src="../img/blank.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                        </div>
                    </div>
                    <div id="small_img">
                        <ul>
                            <li class="active">
                                <img src="${ele.imgSmall}" alt="">
                            </li>
                        </ul>
                    </div>
                    <div class="price_box">
                        ￥<em>${ele.price}</em>
                    </div>
                    <div class="pname">
                        <h3>
                            <a href="details.html?id=${ele.id}" target="_blank"">${ele.introduce}</a>
                        </h3>
                    </div>
                </div>
                `
                xuan.innerHTML += str
            
            Echo.init({

                offset: 0,
            
                throttle: 500
            
            });
        })
        

    })
}
       // ----------分页

       let oBox = document.querySelector('.fenye')
       console.log(oBox);
       new Pagination(oBox, {
           pageInfo: {
               pagenum: parseInt(localStorage.getItem('pagenum')) || 1,            // 当前页码
               pagesize: 12,           // 一页多少条数据
               total: 48,            // 总数据条数
               totalpage: 4          // 总页数
           },
           textInfo: {
               first: '首页',
               prev: '上一页',
               next: '下一页',
               last: '尾页'
           },
           change(n) {
               localStorage.setItem('pagenum', n)
               page(n)
           }
       })

})();



// -----------价格渲染------
;(function(){
    let ocont = document.querySelector('.tab1');
    let xuan1 = document.querySelector('.xuan1') 
console.log(ocont)

let arr = []
// page(localStorage.getItem('pagenum') || 1)
function page(n) {
 
    xuan1.innerHTML = ''
    pAjax({
        url: '../server/gList1.php',
        type: 'get',
        data: {
            pagenum: n,
            pagesize: 12
        }
    }).then(function (res) {
        arr = JSON.parse(res)

        // console.log(arr)

        arr.forEach(ele => {
            let str = `
                <div class="goods_item" style="width:285px; background: #fff; padding-right: 10px; margin-bottom: 15px;">
                    <div class="img_box">
                        <div id="images">
                            <section class="glasses">
                                <img src="../img/blank.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                        </div>
                    </div>
                    <div id="small_img">
                        <ul>
                            <li class="active">
                                <img src="${ele.imgSmall}" alt="">
                            </li>
                        </ul>
                    </div>
                    <div class="price_box">
                        ￥<em>${ele.price}</em>
                    </div>
                    <div class="pname">
                        <h3>
                            <a href="details.html?id=${ele.id}" target="_blank"">${ele.introduce}</a>
                        </h3>
                    </div>
                </div>
                
                `
                xuan1.innerHTML += str
            Echo.init({

                offset: 0,
            
                throttle: 500
            
            });
        })

    })

}

// ----------分页
let oBox = document.querySelector('.fenye1')

new Pagination(oBox, {
    pageInfo: {
        pagenum: parseInt(localStorage.getItem('pagenum')) || 1,            // 当前页码
        pagesize: 12,           // 一页多少条数据
        total: 48,            // 总数据条数
        totalpage: 4          // 总页数
    },
    textInfo: {
        first: '首页',
        prev: '上一页',
        next: '下一页',
        last: '尾页'
    },
    change(n) {
        localStorage.setItem('pagenum', n)
        page(n)
    }
})
})();

// -----------第四个渲染------
;(function(){
    let ocont = document.querySelector('.tab');
    let xuan1 = document.querySelector('.xuan2') 
console.log(ocont)

let arr = []
// page(localStorage.getItem('pagenum') || 1)
function page(n) {
 
    xuan1.innerHTML = ''
    pAjax({
        url: '../server/gList2.php',
        type: 'get',
        data: {
            pagenum: n,
            pagesize: 12
        }
    }).then(function (res) {
        arr = JSON.parse(res)

        // console.log(arr)

        arr.forEach(ele => {
            let str = `
                <div class="goods_item" style="width:285px; background: #fff; padding-right: 10px; margin-bottom: 15px;">
                    <div class="img_box">
                        <div id="images">
                            <section class="glasses">
                                <img src="../img/blank.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                            <section class="glasses">
                                <img src="../img/loading.gif" data-echo="${ele.imgBig}" alt="">
                            </section>
                        </div>
                    </div>
                    <div id="small_img">
                        <ul>
                            <li class="active">
                                <img src="${ele.imgSmall}" alt="">
                            </li>
                        </ul>
                    </div>
                    <div class="price_box">
                        ￥<em>${ele.price}</em>
                    </div>
                    <div class="pname">
                        <h3>
                            <a href="details.html?id=${ele.id}" target="_blank"">${ele.introduce}</a>
                        </h3>
                    </div>
                </div>
                
                `
                xuan1.innerHTML += str
            Echo.init({

                offset: 0,
            
                throttle: 500
            
            });
        })

    })

}

// ----------分页
let oBox = document.querySelector('.fenye1')

new Pagination(oBox, {
    pageInfo: {
        pagenum: parseInt(localStorage.getItem('pagenum')) || 1,            // 当前页码
        pagesize: 12,           // 一页多少条数据
        total: 48,            // 总数据条数
        totalpage: 4          // 总页数
    },
    textInfo: {
        first: '首页',
        prev: '上一页',
        next: '下一页',
        last: '尾页'
    },
    change(n) {
        localStorage.setItem('pagenum', n)
        page(n)
    }
})
})();